1. 함수 추출하기

함수 인라인하기(6.2)과 반대

• 목적과 구현에 따른 함수

절차

1. 함수의 목적을 드러내는 이름을 붙임
2. 추출할 코드를 새 함수에 복사
3. 참조하는 지역변수는 인수로 전달
   • 새 함수에서만 사용되는 변수는 지역변수로
   • 지역변수의 값을 변경할 경우 새 함수의 결과로 전달
4. 새로 만든 함수를 호출하는 문으로 수정

예시 코드

😞 Before

const checkValidation = async (encryptParam) => {
    const {validationCode} = await checkValidation({encryptParam})
    const validCode = VALID_CODE[validationCode]

    // 유효하지 않은 validCode 처리
    // 오류
    if (validCode === 'error') {
        goMain()
    }
    // 만료
    else if (validCode === 'expired') {
        toast('만료되었습니다.')
    }
    // 불일치
    else if (validCode === 'different') {
        toast('명의가 일치하지 않습니다.')
    }
}

😃 After

const checkValidation = async (encryptParam) => {
    const {validationCode} = await checkValidation({encryptParam})
    handleInvalid(VALID_CODE[validationCode])
}

// 유효하지 않은 validCode 처리
const handleInvalid = (validCode) => {
    // 오류
    if (validCode === 'error') {
        goMain()
    }
    // 만료
    else if (validCode === 'expired') {
        toast('만료되었습니다.')
    }
    // 불일치
    else if (validCode === 'different') {
        toast('명의가 일치하지 않습니다.')
    }
}